<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 Ref vs Reactive</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }
    button {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="app">
    <ref-example></ref-example>
    <reactive-example></reactive-example>
  </div>

  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script>
    const { createApp, ref, reactive } = Vue;

    // 使用 ref 的示例
    const RefExample = {
      template: `
        <!-- 示例 1：使用 ref -->
        <div class="container">
          <h2>使用 ref 的计数器</h2>
          <p>Count: {{ count }}</p>
          <button @click="incrementRef">Increment</button>
        </div>
      `,
      setup() {
        const count = ref(0);
        console.log('ref', count)

        function incrementRef() {
          count.value++;
        }

        return {
          count,
          incrementRef,
        };
      },
    };

    // 使用 reactive 的示例
    const ReactiveExample = {
      template: `
        <!-- 示例 2：使用 reactive -->
        <div class="container">
          <h2>使用 reactive 的用户信息</h2>
          <p>Name: {{ user.name }}</p>
          <p>Age: {{ user.age }}</p>
          <button @click="updateUser">Update User</button>
        </div>
      `,
      setup() {
        const user = reactive({
          name: 'Alice',
          age: 25,
        });
        console.log('reactive', user)

        function updateUser() {
          user.name = 'Bob';
          user.age = 30;
        }

        return {
          user,
          updateUser,
        };
      },
    };

    // 创建 Vue 应用
    createApp({
      components: {
        RefExample,
        ReactiveExample,
      },
      template: `
        <div id="app">
          <RefExample></RefExample>
          <ReactiveExample></ReactiveExample>
        </div>
      `,
    }).mount('#app');
  </script>
</body>
</html>
